iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)系列 第 9

鐵人賽 Day9 -- 一定要知道的 CSS (六) -- background-color/background-image

  • 分享至 

  • xImage
  •  

前言

背景是一個如此重要的東西,你能想像螢幕的話棉全都是白底或黑底嗎!!當然不行啊!!

background-color

這個我們在 鐵人賽Day4就有提到過了,那我一樣再說一次哈哈,就不用再跑到第四天了

Div背景顏色

-->系統預設為 #fff 白色,若要其他顏色可以修改 #fff 去做變更

撰寫小撇步 : bgc 後按下 Tab
例如 : bgc + Tab 會自動產生 background-color: #fff;

<style>
    .banner{
        background-color: #fff;
    }    
</style>

在此附上色碼表https://www.toodoo.com/db/color.html

background-image

相信大家一定看過很多網站的背景是一張照片,那他就是使用了 background-image

background-image : url('照片檔案位置') ;

-->照片位置可以使用絕對路徑與相對路徑,
而若要單使用檔名(例:背景.jpg),照片需和程式檔在同一個資料夾中

預設值為原本照片的大小。

而照片也只會顯示在Div區塊的範圍內所以當今天照片的大小超過Div區塊的時候,
就會發生裁切的狀況。

原始照片(798*553)
https://ithelp.ithome.com.tw/upload/images/20210909/20141189jVBOYxXmFD.jpg
但放到一個長寬只有 300p x的 Div區塊內時,就會被裁切掉
https://ithelp.ithome.com.tw/upload/images/20210909/20141189a76igGd8bH.jpg

今天先簡單的來講簡單的background,明天我們花一點時間來講 background:linear-gradient(漸層背景)
https://ithelp.ithome.com.tw/upload/images/20210909/20141189OJL8zxWI90.jpg
那我們鐵人賽Day10見囉!!


上一篇
鐵人賽 Day8 -- 一定要知道的 CSS (五) - align & 如何使 ''Div'' 區塊 置中對齊
下一篇
鐵人賽 Day10 -- 一定要知道的 CSS (七) -- background:linear-gradient漸層背景
系列文
30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言